<template>
  <div class="theme-setting" style="cursor: pointer">
    <i class="iconfont icon-theme toolBar-icon" @click="openDrawer"></i>
  </div>
</template>

<script setup lang="ts">
import mittBus from '../../utils/mittBus';

const openDrawer = () => {
  console.log('ThemeSetting: 点击主题设置图标');
  mittBus.emit("openThemeDrawer");
  console.log('ThemeSetting: 已发送 openThemeDrawer 事件');
};
</script>

<script lang="ts">
export default {
  name: 'ThemeSetting'
};
</script>

<style scoped>
.theme-setting {
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolBar-icon {
  cursor: pointer;
  font-size: 18px !important;
  color: var(--el-text-color-primary) !important;
  transition: color 0.3s;
}

.toolBar-icon:hover {
  color: var(--el-color-primary) !important;
}
</style>
